<template>
  <el-card>
    <el-form ref="form" :model="form" label-width="80px" inline>
      <el-form-item label="一级分类">
        <el-select
          @change="handleC1Change"
          v-model="form.category1Id"
          placeholder="一级分类"
        >
          <el-option
            :label="c1.name"
            :value="c1.id"
            :key="c1.id"
            v-for="c1 in c1Arr"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="form.category2Id"
          @change="handleC2Change"
          placeholder="二级分类"
        >
          <el-option
            :label="c2.name"
            :value="c2.id"
            :key="c2.id"
            v-for="c2 in c2Arr"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          @change="handleC3Change"
          v-model="form.category3Id"
          placeholder="三级分类"
        >
          <el-option
            :label="c3.name"
            :value="c3.id"
            :key="c3.id"
            v-for="c3 in c3Arr"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      form: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
      c1Arr: [],
      c2Arr: [],
      c3Arr: [],
    };
  },
  mounted() {
    this.getC1();
  },
  methods: {
    //获取一级分类
    async getC1() {
      let res = await this.$http.attr.reqC1();
      this.c1Arr = res.data;
    },

    //一级分类发生改变的回调
    async handleC1Change() {
      this.form.category2Id = "";
      this.form.category3Id = "";
      this.c2Arr = [];
      this.c3Arr = [];
      let { category1Id } = this.form;
      let res = await this.$http.attr.reqC2(category1Id);
      this.c2Arr = res.data;
      this.$emit('getCategoryId',1,category1Id)
    },

    //二级分类改变的回调
    async handleC2Change() {
      this.form.category3Id = "";
      this.c3Arr = [];
      let { category2Id } = this.form;
      let res = await this.$http.attr.reqC3(category2Id);
      this.c3Arr = res.data;
      this.$emit('getCategoryId',2,category2Id)
    },
    //三级分类改变的回调
    handleC3Change() {
        let { category3Id } = this.form;
        this.$emit('getCategoryId',3,category3Id)
    },
  },
};
</script>

<style>
</style>